<template>
  <view>
    <view class="sticky top-0 z-10 bg-white">
      <view :style="{ height: statusBarHeight + 'px' }"></view>
      <view class="flex items-center h-[88rpx] px-[32rpx] gap-[36rpx]">
        <view class="font-bold text-[36rpx] text-[#999] flex flex-col items-center" :class="{
          'text-[44rpx]': currentIndex === index,
          'text-black': currentIndex === index,
        }" v-for="(item, index) in tabs" :key="index" @click="tabbarChange(index)">
          <view class="leading-[1]">{{ item.name }}</view>
          <view v-if="currentIndex === index" class="w-[40rpx] h-[8rpx] rounded-full bg-primary_linear mt-[12rpx]">
          </view>
        </view>
      </view>
      <view class="p-[20rpx]">
        <SearchBar @search="onSearch"/>
      </view>
    </view>
    <view class="px-[20rpx]">
      <up-swiper :list="banner" height="300rpx"></up-swiper>
    </view>
    <view class="p-[32rpx]">
      <view class="mb-[32rpx] last:mb-0" v-for="(item,index) in list" :key="index" >
        <view class="flex items-center justify-between">
          <view class="text-[32rpx] font-bold" @click="navigatorToDetail(item.id)">{{ item.title }}</view>
          <up-icon name="more-dot-fill" color="#000" size="48rpx" @click="NotInterested(item)"></up-icon>
        </view>
        <view class="text-[26rpx] my-[24rpx]" @click="navigatorToDetail(item.id)">
          <text>{{ item.brief }}</text>
        </view>
        <view class="rounded-[16rpx] overflow-hidden" @click="navigatorToDetail(item.id)">
          <up-swiper v-if="!video" :list="item.pic" height="384rpx" mode="widthFix"></up-swiper>
          <video :src="item.video" class="w-full h-[384rpx]" v-else />
        </view>
        <view class="text-[22rpx] px-[16rpx] py-[22rpx] flex items-center justify-between">
          <view class="flex items-center">
            <up-icon name="share-square" color="#333" size="36rpx"></up-icon>
            <view>转发</view>
          </view>
          <view class="flex items-center ml-auto">
            <up-icon name="chat" color="#333" size="36rpx"></up-icon>
            <view>消息</view>
          </view>
          <view class="flex items-center ml-[20rpx]">
            <up-icon name="thumb-up" v-if="item.isLiked" color="#46A7FD" size="36rpx"></up-icon>
            <up-icon name="thumb-up" v-else color="#333" size="36rpx"></up-icon>
            <view :class="item.isLiked ? 'text-[#46a7fd]' :''">点赞</view>
          </view>
        </view>
        <view class="relative flex items-center justify-between bg-[#F7F7F7] p-[20rpx] rounded-[16rpx]">
          <view class="text-[26rpx] text-[#999]">Ho! 说出你的想法</view>
          <view class="absolute right-[20rpx] w-[42rpx] h-[42rpx]">
            <up-image src="" width="42rpx" height="42rpx" shape="circle"></up-image>
          </view>
        </view>
      </view>
    </view>
    <CustomTabbar :currentIndex="3" />
  </view>
</template>

<script setup>
import env from "@/config/common.js";
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import SearchBar from "@/components/SearchBar.vue";
import { knowledgeBanner, knowledgeOperation, knowledgeShare } from "../../API/knowledge";
const { tabs, currentIndex, tabbarChange, statusBarHeight } = useTabs(); // 标签栏
const { banner,getBanner } = useSwiper(); // 轮播图
const { list , getList , pageObj , NotInterested } = useList(); // 列表
let baseUrl = env.API_BASE_URL_DEV;
// 跳转详情
function navigatorToDetail(id) {
  uni.navigateTo({
    url: "/subPages/knowledgeDetail/knowledgeDetail?id=" + id,
  });
}
/**
 * @description 标签栏
 * @returns {Object} tabs 标签栏数据
 * @returns {Array} tabs 标签栏数据
 * @returns {Object} currentIndex 当前选中的标签栏索引
 * @returns {Function} tabbarChange 切换标签栏
 * @returns {Number} statusBarHeight 状态栏高度
 */
function useTabs() {
  const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  const tabs = reactive([
    {
      name: "推荐",
    },
    {
      name: "最近",
    },
  ]);
  const currentIndex = ref(0);
  const tabbarChange = (e) => {
    currentIndex.value = e;
  };
  return {
    tabs,
    currentIndex,
    tabbarChange,
    statusBarHeight,
  };
}
/**
 * @description 轮播图
 * @returns {Array} banner 轮播图数据
 */
function useSwiper() {
  const banner = ref(["https://cdn.uviewui.com/uview/swiper/swiper1.png"]);
   const getBanner = async()=>{
    let { data } = await knowledgeBanner()
    banner.value = data.map(item=>{
      item.url = baseUrl + item.pic
      return item
    })
  }
  return {
    banner,
    getBanner
  };
}
/**
 * @description 列表
*/
function useList() {
  const list = ref([])
  const total = ref('')
  const pageObj = reactive({
    pageNum: 1,
    pageSize: 10,
    key:''
  })
  const getList = async() => {
    let { rows,total } = await knowledgeShare(pageObj)
    list.value = rows.map(item=>{
      item.pic = item.pic.map(it=>{
        it = baseUrl + it
        return it
      })
      return item
    })
    total.value = total
  }
  const NotInterested = (id)=>{
    uni.showModal({
      title: '提示',
      content: '确定不再关注该知识分享吗？',
      showCancel: true,
      success: async ({ confirm, cancel }) => {
        if(confirm){
          let res = await knowledgeOperation({sharingId:id,status:1})
        }
      }
    })
  }
  return { list , getList , pageObj, NotInterested }
}
const onSearch = (e) => {
  pageObj.key = e
  getList()
}
onLoad(async() => {
  await getBanner()
  await getList()
})
</script>

<style lang="scss" scoped></style>
